<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .box {
        margin: 0 auto;
        text-align: center;
        border: 1px solid #ccc;
      }

      .box tr th {
        padding: 5px 50px;
        background-color: black;
      }

      .box,
      th,
      td {
        border: 1px solid black;
        line-height: 45px;
        text-align: center;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <!-- <table class="box">
      <tr>
        <th>名次</th>
        <th>姓名</th>
        <th>年纪</th>
        <th>性别</th>
        <th>销售额</th>
        <th>业绩状态</th>
      </tr>
      <tr>
        <td>1</td>
        <td>小红</td>
        <td>26</td>
        <td>女</td>
        <td>99W</td>
        <td>优秀</td>
      </tr>
    </table> -->
    <script>
      let sales = [
        { name: '小明', age: 18, gender: '男', money: 30, status: 0 },
        { name: '小红', age: 26, gender: '女', money: 99, status: 3 },
        { name: '小刚', age: 19, gender: '男', money: 88, status: 2 },
        { name: '小丽', age: 20, gender: '女', money: 67, status: 1 },
        { name: '晓强', age: 23, gender: '女', money: 77, status: 1 },
        { name: '小张', age: 25, gender: '女', money: 80, status: 2 },
      ]

      let html = `<table>
      <tr>
        <th>名次</th>
        <th>姓名</th>
        <th>年纪</th>
        <th>性别</th>
        <th>销售额</th>
        <th>业绩状态</th>
      </tr>`

      let renderTable = function (data) {
        for (let i = 0; i < sales.length; i++) {
          html += `<tr>
        <td>${i + 1}</td>
        <td>${data[i].name}</td>
        <td>${data[i].age}</td>
        <td>${data[i].gender}</td>
        <td>${data[i].money}W</td>
        <td>${
          data[i].status === 0
            ? '不及格'
            : '及格' && data[i].status === 1
            ? '及格'
            : '良好' && data[i].status === 2
            ? '良好'
            : '优秀'
        }</td>
      </tr>`
        }
      }

      renderTable(sales)
      html += `</table>`
      document.write(html)
    </script>
  </body>
</html>
